<template>
  <div class="approve">
    <img src="../../../assets/image/enter/sp.png"
         v-if="currentTenant && Number(currentTenant.auditStatus) === 1 || currentTenant && Number(currentTenant.auditStatus) === 2"
         alt=""
         width="371"
         height="151">
    <img src="../../../assets/image/enter/reject.png"
         v-else
         alt=""
         width="371"
         height="151">
    <h3 v-if="currentTenant && Number(currentTenant.auditStatus) === 1 ">{{title.underReview}}</h3>
    <h3 v-if="currentTenant && Number(currentTenant.auditStatus) === 2 ">{{title.underOK}}</h3>
    <h3 v-if="currentTenant && Number(currentTenant.auditStatus) === 3 ">{{title.reject}}</h3>
    <div class="box">
      <p>所属企业：{{currentTenant ? currentTenant.name: ''}}</p>
      <p>提交时间：{{getInfo.submitDate}} </p>
      <p v-show="currentTenant && Number(currentTenant.auditStatus) === 1">当前状态：<span>审批中</span></p>
      <p v-show="currentTenant && Number(currentTenant.auditStatus) === 2">当前状态：<span>审批成功</span></p>
      <p v-show="currentTenant && Number(currentTenant.auditStatus) === 3">当前状态：<span>审批驳回</span></p>
      <div class="reject-reason"
           v-show="currentTenant && Number(currentTenant.auditStatus) === 3">
        <div class="label">驳回原因：</div>
        <div class="value">{{getInfo.reason}}</div>
      </div>
    </div>
    <div class="btns"
         v-show="currentTenant && Number(currentTenant.auditStatus) === 1 ">
      <span @click="clicks">查看我的企业信息</span>
      <span @click="revocation">撤回申请</span>
    </div>
    <div class="btns"
         v-show="currentTenant && Number(currentTenant.auditStatus) === 2">
      <span @click="clicks">查看我的企业信息</span>
    </div>
    <div class="btns"
         v-show="currentTenant && Number(currentTenant.auditStatus) === 3">
      <span @click="clicks">重新认证</span>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      title: {
        underOK: '您提交的认证申请已审批成功！',
        underReview: '您已提交认证申请，请耐心等待审批',
        reject: '您提交的认证申请已驳回，请重新认证'
      },
      getInfo: {}
    }
  },
  created () {
    this.getApproveInfo();
  },
  methods: {
    clicks () {
      if (this.currentType === 1) {
        this.$router.push('/enter/enterView/firmApprove2sPreview');
      } else {
        this.$router.push('/enter/enterView/supplierPreview');
      }
    },
    // 获取企业的审批信息
    getApproveInfo () {
      this.$store.dispatch('request', this.$api.register.getInAuditOrRejectInfo({
        tenantId: this.currentTenant.id
      })).then(res => {
        console.log(res);
        this.getInfo = res.result || {}
      })
    },
    //撤回
    revocation () {
      let Arr = {
        auditStatus: 4,
        comment: '',
        id: this.currentTenant.id
      }
      console.log(Arr);
      this.$store.dispatch("request", this.$api.register.getaudit(Arr)).then(res => {
        console.log(res);
        this.$message.success("撤回成功");
        this.$store.dispatch('user/toFilterUserTenants', true)
        if (this.currentType === 1) {
          this.$router.push('/enter/enterView/firmApprove2s');
        } else {
          this.$router.push('/enter/enterView/supplier');
        }
      })
    },
  },
  computed: {
    currentTenant () {
      return this.$store.state.user.currentTenant
    },
    currentType () {
      return this.$store.state.user.currentType
    }
  }
}
</script>
<style lang="less" scoped>
.approve {
  width: 420px;
  overflow: hidden;
  margin: 72px auto 166px;
  text-align: center;

  .reject-reason {
    .flex(flex-start, flex-start);

    .label {
      width: 70px;
    }

    .value {
      width: 330px;
      -ms-word-break: break-all;
      word-break: break-all;
    }
  }

  h3 {
    margin-top: 48px;
    color: @colorCommonFont;
    font-size: 24px;
    line-height: 24px;
    margin-bottom: 24px;
    font-weight: 500;
  }

  .box {
    width: 400px;
    margin: 0 auto 40px;
    text-align: left;
    font-size: 14px;
    color: @colorGreyFontM;
    line-height: 28px;

    p {
      margin-bottom: 0;

      span {
        color: #ff9900;
      }
    }
  }

  .btns {
    span {
      width: 160px;
      height: 40px;
      display: inline-block;
      line-height: 40px;
      text-align: center;
      background-color: @greyDeepBackground;
      color: @colorCommonFont;
      border-radius: 2px;
      cursor: pointer;
    }

    span:nth-child(1) {
      background-color: @activeRed;
      color: #fff;
      margin-right: 24px;
    }
  }
}
</style>
